<template>
  <div style="width: 240px; " @click.stop="toDetails(commodityid)">
    <!-- <p>
        <label style="margin-right: 16px;">切换 Loading</label>
        <el-switch v-model="loading" />
    </p>-->
    <el-skeleton style="width: 240px" :loading="loading" animated>
      <template slot="template">
        <el-skeleton-item variant="image" style="width: 240px; height: 240px;" />
        <div style="padding: 14px;">
          <el-skeleton-item variant="h3" style="width: 50%;" />
          <div
            style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;"
          >
            <el-skeleton-item variant="text" style="margin-right: 16px;" />
            <el-skeleton-item variant="text" style="width: 30%;" />
          </div>
        </div>
      </template>
      <template>
        <el-card :body-style="{ padding: '0px', marginBottom: '1px' }">
          <img
          width="240px"
            style="user-select: none;pointer-events: none;"
            :src="goodImg"
            class="image"
          />

          <div style="padding: 10px;">
            <span>{{ title_name }}</span> <br>
          价格：  <span>{{ price }}</span>
            <div class="bottom card-header">
              <span class="time">程度：{{ goodStu }}</span>
              <el-button type="text" class="button">详情</el-button>
            </div>
          </div>
        </el-card>
      </template>
    </el-skeleton>
  </div>
</template>
  
  <script>
export default {
  // 这里有一个属性是标题，就是这个商品的名字，未来传入的属性应该是标题，几成新，价格，如果可以的话能加图
  props: ['title_name', 'price', 'goodStu','good_id','goodImg'],
  // 分别对应  标题       价格     新旧程度
  data() {
    return {
      // 商品id
      shoppingID: 0,
      loading: true,
      currentDate: "2021-06-01"
    };
  },
  created() {},
  mounted() {
    setTimeout(() => {
      this.getdata();
      var elements = document.getElementsByClassName("is-always-shadow");
      // 不知道是什么脏东西，组件里有个阴影，去了，追求扁平
      // 遍历元素并删除 "is-always-shadow" 类
      for (var i = 0; i < elements.length; i++) {
        elements[i].classList.remove("is-always-shadow");
      }
    }, 600);
    // 获取元素
    // 获取所有具有 "is-always-shadow" 类的元素
  },

  methods: {
    // 该方法用于调用父组件的方法 [ 主线任务把商品ID扔出去 ]
    callFatherFN() {
      this.$emit("changeid", this.shoppingID); // 调用父组件方法
      // 此处省略百行代码🤪🤪🤪...
    },
    // 打开详情页面
    toDetails(title) {
      this.shoppingID = title;
      this.callFatherFN();
      // 此处省略百行代码🤪🤪🤪...
    },
    getdata() {
      // ...
      console.log(this.title)
      // if (typeof this.title !== "string") {
      //   this.title = String(this.title).trim();
      // } else {
      //   this.title = this.title.trim();
      // }
      // ...
      this.loading = false
    }
  }
};
</script>
<style>
.el-card {
  border-radius: 10px;
}
</style>